<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>我的工单</el-breadcrumb-item>
    </el-breadcrumb>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div >
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          @click="handleSearchList()"
          type="primary"
          size="small">
          查询结果
        </el-button>
        <el-button
          style="float: right;margin-right: 15px"
          @click="handleResetSearch()"
          size="small">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="workorderList" size="small" label-width="140px">
          <div>
            <el-input style="width: 15%" v-model="workorderList.keyword" placeholder="工单编号"></el-input>
            <el-input style="width: 15%" v-model="workorderList.productSn" placeholder="创建时间"></el-input>
            <el-input style="width: 15%" v-model="workorderList.productSn" placeholder="问题类型"></el-input>
            <el-cascader placeholder="请选择工单状态" style="width: 15%"
                         clearable
                         v-model="selectProductCateValue"
                         :options="orderstatusOptions">
            </el-cascader>
            <el-cascader placeholder="请选择组" style="width: 15%"
                         clearable
                         v-model="selectProductCateValue"
                         :options="handlegroupOptions">
            </el-cascader>
            <el-input style="width: 15%" v-model="workorderList.productSn" placeholder="处理人"></el-input>
          </div>
          <div>
            <el-input style="width: 15%" v-model="workorderList.productSn" placeholder="客户姓名"></el-input>
            <el-input style="width: 15%" v-model="workorderList.productSn" placeholder="身份证号"></el-input>
            <el-input style="width: 15%" v-model="workorderList.productSn" placeholder="电话号码"></el-input>
            <el-input style="width: 15%" v-model="workorderList.productSn" placeholder="微信/手机openID"></el-input>
            <span>紧急程度</span>
            <el-radio v-model="radio" label="1">全部</el-radio>
            <el-radio v-model="radio" label="2">高</el-radio>
            <el-radio v-model="radio" label="3">中</el-radio>
            <el-radio v-model="radio" label="4">低</el-radio>

          </div>
        </el-form>
      </div>
    </el-card>

    <div class="table-container">
      <el-table ref="productTable"
                :data="list"
                style="width: 103vm"
                @selection-change="handleSelectionChange"
                v-loading="listLoading"
                border>
        <el-table-column label="编号" width="103vm" align="center">
          <template slot-scope="scope">{{scope.row.orderid}}</template>
        </el-table-column>
        <el-table-column label="客户姓名" width="103vm" align="center">
          <template slot-scope="scope">{{scope.row.customername}}</template>
        </el-table-column>
        <el-table-column label="证件号码" width="103vm" align="center">
          <template slot-scope="scope">{{scope.row.centificatenumber}}</template>
        </el-table-column>
        <el-table-column label="问题类型" width="103vm" align="center">
          <template slot-scope="scope">{{scope.row.problemtype}}</template>
        </el-table-column>
        <el-table-column label="处理组" width="103vm" align="center">
          <template slot-scope="scope">{{scope.row.handlegroup}}</template>
        </el-table-column>
        <el-table-column label="处理人" width="103vm" align="center">
          <template slot-scope="scope">{{scope.row.handleperson}}</template>
        </el-table-column>
        <el-table-column label="紧急程度" width="103vm" align="center">
          <template slot-scope="scope">
              <span v-if="scope.row.urgelevel==0" style="color: red">高</span>
              <span v-else-if="scope.row.urgelevel==1">中</span>
              <span v-else-if="scope.row.urgelevel==2">低</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="103vm" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.orderstatus ==0">退单</span>
            <span v-else-if="scope.row.orderstatus ==1">未处理</span>
            <span v-else-if="scope.row.orderstatus ==2">处理中</span>
            <span v-else-if="scope.row.orderstatus ==3">归档</span>
            <span v-else-if="scope.row.orderstatus ==4">挂起</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="103vm" align="center">
          <template slot-scope="scope">
            {{(new Date(scope.row.creattime)).getFullYear() +'/'
            + ((new Date(scope.row.creattime)).getMonth()+1)+ '/'
            + (new Date(scope.row.creattime)).getDate()}}
          </template>
        </el-table-column>
        <el-table-column label="剩余失效" width="103vm" align="center">
          <template slot-scope="scope">{{scope.row.periods}}</template>
        </el-table-column>
        <el-table-column label="催办次数" width="103vm" align="center">
          <template slot-scope="scope">{{scope.row.urgetimes}}</template>
        </el-table-column>
        <el-table-column label="首次处理时间" width="103vm" align="center">
          <template slot-scope="scope">{{scope.row.createdate}}</template>
        </el-table-column>

      </el-table>
    </div>

    <div class="pagination-container" >
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="workorderList.pageSize"
        :page-sizes="[5,10,15]"
        :current-page.sync="workorderList.pageNum"
        :total="total">
      </el-pagination>
    </div>
  </div>
  </div>
</template>

<script>
  import axios from 'axios';
  const defaultWorkorderList={

  }
  export default {
    name: "OrderMy",
    data(){
      return{

        list:[
          {"id":1,"customername":"x","centificatenumber":"xxx","problemtype":"x","handlegroup":"x","handleperson":"x","urgelevel":1,"orderstatus":1,"creattime":"xxxx","periods":1,"urgetimes":"xxx","firsttime":"xxx","createdate":"x"},
          {"id":2,"customername":"x","centificatenumber":"xxx","problemtype":"x","handlegroup":"x","handleperson":"x","urgelevel":1,"orderstatus":1,"creattime":"xxxx","periods":1,"urgetimes":"xxx","firsttime":"xxx","createdate":"x"},
          {"id":3,"customername":"x","centificatenumber":"xxx","problemtype":"x","handlegroup":"x","handleperson":"x","urgelevel":1,"orderstatus":1,"creattime":"xxxx","periods":1,"urgetimes":"xxx","firsttime":"xxx","createdate":"x"}
        ],

        /*工单状态下拉框*/
        orderstatusOptions:[
          {
            value:'0',
            label: '退单'
          }
          ,{
            value:'1',
            label: '未处理'
          }
          ,{
            value:'2',
            label: '处理中'
          }
          ,{
            value:'3',
            label: '归档'
          }
          ,{
            value:'4',
            label: '挂起'
          }
        ],

        handlegroupOptions:[
          {
            value:'1',
            label: '处理组1'
          }
          ,{
            value:'2',
            label: '处理组2'
          }
          ,{
            value:'3',
            label: '处理组3'
          }
          ,{
            value:'4',
            label: '处理组4'
          }
        ],
        workorderList:Object.assign({},defaultWorkorderList),
        radio:1
      }
    },
    mounted() {
      axios.get("/api/orderMy/list")
        .then((res)=>{
          console.log(res)
          this.list = res.data.data;
        })
    }
  }
</script>

<style scoped>

</style>
